<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title></title>
	<!--[if !IE]><!-->
	<link rel="stylesheet" type="text/css" href="css/style.css" />
	<link  rel="stylesheet" type="text/css" href="css/new-group.css"/>
	<!--<![endif]-->
	<!--[if lt IE 9]>
	<link rel="stylesheet" type="text/css" href="css/style-ie8.css" />
	<link rel="stylesheet" type="text/css" href="css/new-group-ie8.css" />
	<![endif]-->

	<link href="css/menu.css" rel="stylesheet"/>
	<link href="css/gridview.css" rel="stylesheet"/>

	<link rel="SHORTCUT ICON" href="images/icon/logo-head.png"/>
	<script src="js/jquery-1.8.3.min.js"></script>

</head>
<body>
<div class="main">
	<div class="header">
		<div class="header-container">
			<div class="header-menu">
				<ul class="menu-list">
					<li class="menu-item"><a href="#" id="menu-item1">Item 1</a></li>
					<li class="menu-item"><a href="#" id="menu-item1">Item 2</a></li>
					<li class="menu-item"><a href="#" id="menu-item1">Item 3</a></li>
					<li class="menu-item"><a href="#" id="menu-item1">Item 4</a></li>
				</ul>
			</div>
			<div class="header-logo">LOGO</div>
			<div class="header-log">
				<div class="btn-expand-login">Login</div>
			</div>
		</div>
	</div>
	<div class="cover">
		<div class="cover-container">
		</div>

	</div>
	<div class="page">
		<div class="page-container">
			<div class="page-cont-left">
				<div class="page-cont-title">
					<span class="cont-title-bold">Pools</span><a class="cont-title-button">Create new pool</a>
				</div>
				<div class="page-cont-title-sub">
					<span class="cont-title-sub">Available pools</span>
					<i class="sub0"></i>
				</div>
				<div class="popup-input-row"><span>Search</span><input type="text"></div>
				<div class="grid-wrapper">
					<ul class="grid">
						<li class="item">
							<div class="grid-icon-panel">
								<img src="resources/img/png0.png"/>
							</div>
							<div class="grid-item-cap">PEC Zwolle</div>
							<div class="grid-item-mess">by Tim</div>
							<a class="grid-item-button" href="#"> Join</a>
						</li>
						<li class="item">
							<div class="grid-icon-panel">
								<img src="resources/img/png2.png"/>
							</div>
							<div class="grid-item-cap">PEC Zwolle</div>
							<div class="grid-item-mess">by Tim</div>
							<a class="grid-item-button" href="#"> Join</a>
						</li>
						<li class="item">
							<div class="grid-icon-panel">
								<img src="resources/img/png1.png"/>
							</div>
							<div class="grid-item-cap">PEC Zwolle</div>
							<div class="grid-item-mess">by Tim</div>
							<a class="grid-item-button" href="#"> Join</a>
						</li>
						<li class="item">
							<div class="grid-icon-panel">
								<img src="resources/img/png0.png"/>
							</div>
							<div class="grid-item-cap">PEC Zwolle</div>
							<div class="grid-item-mess">by Tim</div>
							<a class="grid-item-button" href="#"> Join</a>
						</li>
						<li class="item">
							<div class="grid-icon-panel">
								<img src="resources/img/png1.png"/>
							</div>
							<div class="grid-item-cap">PEC Zwolle</div>
							<div class="grid-item-mess">by Tim</div>
							<a class="grid-item-button" href="#"> Join</a>
						</li>
						<li class="item">
							<div class="grid-icon-panel">
								<img src="resources/img/png2.png"/>
							</div>
							<div class="grid-item-cap">PEC Zwolle</div>
							<div class="grid-item-mess">by Tim</div>
							<a class="grid-item-button" href="#"> Join</a>
						</li>
					</ul>


				</div>
			</div>
			<div class="page-cont-right">
				<div class="page-cont-title light">
					<span class="cont-title-bold">Text</span>
				</div>
				<div class="page-cont-rate">
					<p class="page-cont-label">115,098 participants</p>

					<p class="page-cont-label">5,981,178 predictions</p>
				</div>
				<ul class="page-cont-tip-list">
					<li class="page-cont-tip-item">
						<div class="page-cont-tip-icon"><i class="tip-num">1</i></div>
						<div class="page-cont-tip-info">
							<div class="page-cont-tip-title">Enter your predictions</div>
							<div class="page-cont-tip-des">You will score points when you predict the correct winner, or
								the
								exact score of one or both teams
							</div>
						</div>
					</li>
					<li class="page-cont-tip-item">
						<div class="page-cont-tip-icon"><i class="tip-num">2</i></div>
						<div class="page-cont-tip-info">
							<div class="page-cont-tip-title">Enter your predictions</div>
							<div class="page-cont-tip-des">You will score points when you predict the correct winner, or
								the
								exact score of one or both teams
							</div>
						</div>
					</li>
					<li class="page-cont-tip-item">
						<div class="page-cont-tip-icon"><i class="tip-num">3</i></div>
						<div class="page-cont-tip-info">
							<div class="page-cont-tip-title">Enter your predictions</div>
							<div class="page-cont-tip-des">You will score points when you predict the correct winner, or
								the
								exact score of one or both teams
							</div>
						</div>
					</li>
				</ul>
				<div class="page-cont-ref"></div>
			</div>
			<div class="page-clear"></div>
		</div>

	</div>
	<div class="footer">
		<div class="footer-container">
			<div class="footer-menu">
				<ul class="nav-list">
					<li class="nav-item"><span>About us</span></li>
					<li class="nav-item"><a href="#">Frequently asked questions</a></li>
					<li class="nav-item"><a href="#">Terms of use</a></li>
					<li class="nav-item"><a href="#">Contact us</a></li>
					<li class="nav-item"><a href="#">Privacy statement</a></li>
				</ul>
				<ul class="nav-list">
					<li class="nav-item"><span href="#">Our competitions</span></li>
					<li class="nav-item"><a href="#">Eredivisie</a></li>
					<li class="nav-item"><a href="#">Champions League</a></li>
					<li class="nav-item"><a href="#">Top League</a></li>
				</ul>
				<ul class="nav-list">
					<li class="nav-item"><span href="#">Copyright</span></li>
				</ul>
				<div class="social-list">
					<div class="social-title">Follow us</div>
					<div class="social-item facebook"></div>
					<div class="social-item twitter"></div>
				</div>
			</div>
		</div>
	</div>
</div>

<div class="popup" id="create-pool-popup">
	<div class="popup-container">
		<div class="popup-form">
			<div class="page-cont-title">
				<span class="cont-title-bold">Create new pool</span><span class="cont-title-sub"></span>
				<span class="popup-btn-close" id="popup-btn-login-close"></span>
			</div>
			<div class="page-cont-title-sub">
				<span class="cont-title-sub"></span>
				<i class="sub1"></i>
			</div>

			<div class="popup-create-pool-info">
				<div class="popup-input-row"><span>Name</span><input type="text"/></div>
				<div class="popup-area-row">
					<span>Description</span>
					<textarea class="" maxlength="4096"></textarea>
				</div>
			</div>
			<div class="popup-create-pool-group">
				<div class="popup-create-pool-group-avt">
					<span class="popup-create-pool-img"></span>
				</div>
				<div class="popup-btn-upload">
					<span>Choose file</span>
					<input type="file"/>
				</div>
			</div>
			<div class="popup-control-row">
				<div class="popup-input-check-row">
					<input id="popup-input-pool-check" class="css-checkbox popup-input-check" type="checkbox"
					       checked="checked">
					<label for="popup-input-pool-check" class="css-label dark-check-green">This pool is private
						(Only you can invite others to this pool)</label>
				</div>
				<a class="popup-btn-upload" href="#">Save</a>
			</div>
			<span class="loading-spin undisplayed"></span>
		</div>
		<div class="popup-bottom"></div>
	</div>
</div>
</body>
</html>
